<template>
    <div class='wrap'>
        <div class="mode-main">
          <div class="menu">
            <p>请选择参赛模式</p>
            <div class="mode-btns">
              <div @click='goto("team")' class="left-btn mode-btn"></div>
              <div @click='goto("crule")' class="right-btn mode-btn"></div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    goto (link) {
      this.$router.push('/' + link)
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  created () {
    this.GLOBAL.player.missCount = 0
    this.GLOBAL.player.level = 1
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'bgimg'
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/rule'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bgimg')
  }
}
</script>

<style>
.bgimg {
  background:url('../assets/home/bg.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.mode-main {
  display: flex;
  flex-direction: column;
  background:url('../assets/mode/bg_3.png') no-repeat;
  background-size:20.5rem;
  min-height: 36rem;
  width: 20.5rem;
}
.menu{
  top:15%;
  font-size: 1.2rem;
  margin-top: 5rem;
}
.mode-btns {
  height: 16rem;
  width: 20.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.mode-btn {
  height: 15rem;
  width: 9.5rem;
}
.menu p {
  text-align: center;
  color: white;
  margin: 0 auto;
  width:100%;
}
.left-btn {
  background:url('../assets/mode/btn_3.png') no-repeat;
  background-size:9.5rem;
}
.right-btn {
  background:url('../assets/mode/btn_2.png') no-repeat;
  background-size:9.5rem;
}
</style>
